window.addEventListener('load', function() {
  // 实现登陆注册面板的显示和隐藏
  // 去注册
  let goRegister = this.document.querySelector('.goRegister')
  // 去登陆
  let goLogin = this.document.querySelector('.goLogin')
  // 注册面板
  let register = document.querySelector('.register')
  // 登陆面板
  let login = document.querySelector('.login')

  // 获取注册面板中的用户名
  let rusername = this.document.querySelector('.register [name="username"]')
  let rpassword = this.document.querySelector('.register [name="password"]')

  // 获取登陆面板中的用户名
  let lusername = this.document.querySelector('.login [name="username"]')
  let lpassword = this.document.querySelector('.login [name="password"]')

  // 单击去注册链接实现注册面板的显示
  goRegister.addEventListener('click', function() {
    register.style.display = 'block'
    login.style.display = 'none'
  })
  // 单击去登陆链接实现登陆面板的显示
  goLogin.addEventListener('click', function() {
    register.style.display = 'none'
    login.style.display = 'block'
  })

  // 添加验证规则：验证一个用户名和密码
  function test() {
    // 返回验证对象
    return {
      // fields：指定你需要验证的属性，这个属性名称对应着指定表单中的表单元素的name属性值
      fields: {
        // 一个一个的具体的验证规则
        username: {
          // 这里username是 input 的name属性值，表示对这个输入框进行验证
          validators: {
            // 添加真正的校验规则
            notEmpty: {
              //不能为空
              message: '用户名不能为空.' // 如果不满足校验规则，则给出这句提示
            },
            stringLength: {
              //检测长度
              min: 2, // 最少2位
              max: 15, // 最多15位
              message: '用户名需要2~15个字符'
            }
          }
        },
        password: {
          validators: {
            notEmpty: {
              message: '密码不能为空'
            },
            stringLength: {
              //检测长度
              min: 6,
              max: 15,
              message: '密码需要6~15个字符'
            }
          }
        }
      }
    }
  }

  // 注册:为注册form表单中的submit绑定事件
  // bootstrapValidator：插件内置的验证方法，调用这个方法实现验证
  // test()：这就是自定义的验证规则
  // on：为元素绑定事件方法
  // success.form.bv：表单的submit的默认提交行为
  $('.register form')
    .bootstrapValidator(test())
    .on('success.form.bv', function(e) {
      e.preventDefault()
      // 通过验证，这里的代码将会执行。我们将Ajax请求的代码放到这里即可
      axios({
        url: '/api/register',
        method: 'POST',
        data: {
          username: rusername.value,
          password: rpassword.value
        }
      }).then(res => {
        console.log(res)
        if (res.data.code == 0) {
          // 使用提示框插件进行消息提示
          toastr.success(res.data.message)
          goLogin.click()
        } else {
          toastr.warning(res.data.message)
        }
      })
    })

  // 登陆
  $('.login form')
    .bootstrapValidator(test())
    .on('success.form.bv', function(e) {
      e.preventDefault()
      // 通过验证，这里的代码将会执行。我们将Ajax请求的代码放到这里即可
      axios({
        url: '/api/login',
        method: 'POST',
        data: {
          username: lusername.value,
          password: lpassword.value
        }
      }).then(res => {
        console.log(res)
        if (res.data.code == 0) {
          // 1 将后台响应的token实现本地存储----request.js 进行全局拦截配置
          localStorage.setItem('token-80', res.data.token)
          // 使用提示框插件进行消息提示
          // toastr.success(res.data.message)
          // 跳转到后台首页
          location.href = './index.html'
        } else {
          toastr.warning(res.data.message)
        }
      })
    })
})
